<template>
  <el-dialog
    style="text-align: center"
    title="增加商品"
    width="width:600px"
    :visible.sync="dialogVisible"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="width: 500px"
      :rules="rules"
    >
      <el-form-item label="商品名称" prop="FoodName">
        <el-input v-model="form.FoodName" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品编号" prop="FoodCode">
        <el-input v-model="form.FoodCode" placeholder="商品编号"></el-input>
      </el-form-item>
      <el-form-item label="商品类别" prop="FoodCategory">
        <el-input
          v-model="form.FoodCategory"
          placeholder="商品类别"
        ></el-input> </el-form-item
      ><el-form-item label="商品价格" prop="FoodPrice">
        <el-input v-model="form.FoodPrice" placeholder="商品价格"></el-input>
      </el-form-item>
      <el-form-item label="商品销量" prop="FoodQuantity">
        <el-input v-model="form.FoodQuantity" placeholder="商品销量"  @keyup.enter.native='onSubmit()'></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="primary" @click="onCloseSubmit">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { insertFoodInfo } from "@/api/food";
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      form: {
        FoodName: "",
        FoodCode: "",
        FoodCategory: "",
        FoodPrice: "",
        FoodQuantity: "",
      },
      rules:{
        FoodName:[{required:true, message:'商品名称不能为空', trigger:'blur'}],
        FoodCode:[{required:true, message:'商品编号不能为空', trigger:'blur'}],
        FoodCategory:[{required:true, message:'商品类别不能为空', trigger:'blur'}],
        FoodPrice:[{required:true, message:'商品价格不能为空', trigger:'blur'}]
      }
    }
  },
  methods: {
    onOpen() {
      this.dialogVisible = true;
    },
    onSubmit() {
      if (this.form.FoodName == "") {
        this.$message.error("商品名称不能为空");
        return;
      }
      if (this.form.FoodCode == "") {
        this.$message.error("商品编号不能为空");
        return;
      }
      if (this.form.FoodCategory == "") {
        this.$message.error("商品类别不能为空");
        return;
      }
      if (this.form.FoodPrice == "") {
        this.$message.error("商品价格不能为空");
        return;
      }
      if (this.form.FoodQuantity == "") {
        this.$message.error("商品销量不能为空");
        return;
      }
      let insertdata = this.form;
      insertFoodInfo(insertdata).then((rsp) => {
        if (rsp.code === 0) {
          this.$message.success("增加成功!");
          this.dialogVisible = false;
          this.$emit("onRefresh");
          this.$refs.form.resetFields();
        } else {
          this.$message.error(rsp.msg);
        }
      });
    },
    onCloseSubmit() {
      this.dialogVisible = false;
    },
  },
};
</script>
